<template>
  <div class="login-container">
    <div class="login-img">
      <img :src="tec" alt="">
    </div>
    <div class="login-content">
      <div class="login-title">
        <img :src="logo" alt="">
        <span>营销数字化运营平台</span>
      </div>
      <div class="login-form">
        <el-form :model="form" ref="form">
          <el-form-item label="" prop="phone">
            <el-input
              type="text"
              placeholder="请输入手机号"
              prefix-icon="el-icon-date"
              v-model="form.phone"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-date"
              v-model="form.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-button" style="width: 100%" @click="submitForm('form')">登录</el-button>
          </el-form-item>
        </el-form>
        <div class="extral-link">
          <el-button type="text" @click="toUrl(resetPassword)">忘记密码？</el-button>
          <el-button type="text" @click="toUrl(signUp)">立即注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import md5 from 'utils/md5'
  export default {
    name: "index",
    data() {
      return ({
        form: {},
        resetPassword: '/resetPassword',
        signUp: '/signUp',
        tec: require('../../images/login/tec.png'),
        logo: require('../../images/login/logo.png')
      })
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post(this.GLOBAL.host, {
              method: "User_Login",
              // method: "LoginTest",
              data: {
                phone: this.form.phone,
                password: md5(this.form.password),
                // password: this.form.password,
              }
            }).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '登录成功',
                  type: 'success'
                });
                sessionStorage.setItem("tokenName", res.data.data.dipsToken);
                sessionStorage.setItem("userData", JSON.stringify(res.data.data));
                this.$store.commit('updateUserData', res.data.data)
                let redirect = decodeURIComponent(
                  this.$route.query.redirect || "/index"
                );
                this.$router.push({path: redirect});
              } else {
                this.$message({
                  message: res.data.data,
                  type: 'error'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      toUrl(url){
        this.$router.push({path: url});
      },
    }
  }
</script>

<style scoped lang="less">
  .login-container {
    height: 100%;
    width: 100%;
    background-image: url('../../images/login/background.png');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-content {
    height: 400px;
    flex-basis: 540px;
    flex-shrink: 0;
    background-color: white;
    padding: 60px;
    margin-left: 100px;
  }
  .login-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #6f8696;
    margin-bottom: 30px;
  }
  .extral-link {
    display: flex;
    justify-content: space-between;
    margin-top: -20px;
  }
  .login-button {
    background-image: linear-gradient(to right, #3ec4d9, #03a9f4);
  }
  .login-img {
    flex: 600px 0 0;
    > img {
      width: 100%;
      padding-top: 30px;
    }
  }
</style>
